<template>
  <div
    class="count-down"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div
      :style="{
        backgroundColor: modelValue?.bgColor,
        marginTop: '30px',
        marginBottom: '30px',
      }"
      class="count-down-container"
    >
      <div class="count-down__img">
        <img :src="modelValue?.imgSrc" alt="" />
      </div>
      <div class="count-down__content">
        <div class="content__text" v-html="modelValue?.content"></div>
        <div class="content__title">{{ modelValue?.title }}</div>
      </div>
      <ul class="count-down__timer">
        <li>
          <div class="count-down__timer__time">{{ timeObj?.day }}</div>
          <div class="count-down__timer__label">日</div>
        </li>
        <li>
          <div class="count-down__timer__time">{{ timeObj?.hour }}</div>
          <div class="count-down__timer__label">小时</div>
        </li>
        <li>
          <div class="count-down__timer__time">{{ timeObj?.min }}</div>
          <div class="count-down__timer__label">分钟</div>
        </li>
        <li>
          <div class="count-down__timer__time">{{ timeObj?.sec }}</div>
          <div class="count-down__timer__label">秒</div>
        </li>
      </ul>
    </div>

    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
  </div>

  <Setting
    v-if="!isPreview"
    v-model:show="showSetting"
    :data="modelValue"
  ></Setting>
</template>

<script lang="ts" setup>
import { nextTick, ref } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";

// 定义组件名称
defineOptions({
  name: "CountDown",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);
const timeObj = ref({
  day: 0,
  hour: 0,
  min: 0,
  sec: 0,
});
// const timer = null;
const timer = ref<NodeJS.Timeout | null>(null);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.content) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "CountDown",
    title: "title",
    content: "content",
    countTime: "2025-08-08",
    imgSrc:
      "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
    // width: "",
    bgColor: "#ffffff",
  };
  emit("update:modelValue", data);
  nextTick(() => {
    countDown();
  });
};
// 根据现在的时间(年月日时分秒)到modelValue中的countTime的倒计时，并赋值给timeObj中，要求一直倒计时
const countDown = () => {
  if (timer.value) {
    clearInterval(timer.value);
  }
  timer.value = setInterval(() => {
    const now = new Date();
    const countTime = new Date(props.modelValue.countTime);
    const diff = countTime.getTime() - now.getTime();
    if (diff <= 0) return;
    timeObj.value.day = Math.floor(diff / (1000 * 60 * 60 * 24));
    timeObj.value.hour = Math.floor((diff / (1000 * 60 * 60)) % 24);
    timeObj.value.min = Math.floor((diff / (1000 * 60)) % 60);
    timeObj.value.sec = Math.floor((diff / 1000) % 60);
    //四个时间都等于0，取消定时器
    if (
      timeObj.value.day === 0 &&
      timeObj.value.hour === 0 &&
      timeObj.value.min === 0 &&
      timeObj.value.sec === 0
    ) {
      clearInterval(timer.value!);
      timer.value = null;
    }
  }, 1000);
};

handleInit();
</script>

<style lang="scss" scoped>
.count-down {
  position: relative;
}

.count-down-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.count-down__img {
  width: 127.14px;
  height: 100px;
  margin-bottom: 25.06px;
}

@media (max-width: 767.98px) {
  .count-down__img {
    width: 101.7px;
    height: 80px;
    margin-bottom: 24px;
  }
}

.count-down__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.count-down__content {
  margin-bottom: 24px;
  max-width: 620px;
}

@media (max-width: 767.98px) {
  .count-down__content {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.count-down__content .content__text {
  font-size: 14px;
  line-height: 1.2857;
  letter-spacing: 0.04em;
  color: #64788f;
  text-align: center;
  margin-bottom: 8px;
}

.count-down__content .content__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: #0048e8;
  text-align: center;
}

@media (max-width: 1023.98px) {
  .count-down__content .content__title {
    font-size: 14px;
    line-height: 1.714;
  }
}

@media (max-width: 767.98px) {
  .count-down__content .content__title {
    line-height: 1.428;
  }
}

.count-down__timer,
.count-down__timer li {
  display: flex;
  align-items: center;
}

.count-down__timer li {
  flex-direction: column;
}

.count-down__timer li:not(:first-child) {
  padding-left: 48.83px;
  border-left: 1px solid #e4e4e6;
}

@media (max-width: 1023.98px) {
  .count-down__timer li:not(:first-child) {
    padding-left: 25.83px;
  }
}

@media (max-width: 767.98px) {
  .count-down__timer li:not(:first-child) {
    padding-left: 13.83px;
  }
}

.count-down__timer li:not(:last-child) {
  padding-right: 48.83px;
}

@media (max-width: 1023.98px) {
  .count-down__timer li:not(:last-child) {
    padding-right: 25.83px;
  }
}

@media (max-width: 767.98px) {
  .count-down__timer li:not(:last-child) {
    padding-right: 13.83px;
  }
}

.count-down__timer__time {
  font-size: 80px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #0048e8;
  margin-bottom: 11px;
}

@media (max-width: 767.98px) {
  .count-down__timer__time {
    font-size: 36px;
    margin-bottom: 4px;
  }
}

.count-down__timer__label {
  font-size: 20px;
  line-height: 0.8;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #82828c;
}

@media (max-width: 767.98px) {
  .count-down__timer__label {
    font-size: 12px;
    line-height: 1.33;
  }
}
</style>
